<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello-vue</title>
    <!-- 使用CSDN的ElementPlus样式，也可以把文件下载到本地再引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <style>
        /* 取消浏览器的默认样式 */
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <template id="temp1">
        <div>
            <p>姓名：{{name}}，年龄：{{age}}</p>
            <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
    </template>
    <main id="app">
        <sub-component :name="name" :age="age" @update:model-value="handleUpdate"></sub-component>
    </main>
</body>
<!-- 使用CSDN的Vue3，也可以把文件下载到本地再引入 -->
<script src="https://unpkg.com/vue@3"></script>
<!-- 使用CSDN的ElementPlus库，也可以把文件下载到本地再引入，记得先引入Vue3 -->
<script src="https://unpkg.com/element-plus"></script>
<script>
    // 从Vue中引入需要使用的方法（ES6的解构赋值）
    const { createApp, ref } = Vue;
    // 其它的也通过该方式
    // const {createApp,ref,reactive,computed,watch...}

    // 定义创建Vue的选项对象
    const App = {
        // vue3 只需要提供一个setup函数即可
        setup() {
            let name = ref("奉先");
            let age = ref(36);

            function handleUpdate(val) {
                console.log("子组件传来参数：", val);
            }

            // setup()函数，必须return一个对象，对象中的属性可以在模板中进行使用
            return {
                name,
                age,
                handleUpdate
            }
        }
    }

    // 利用选项对象，和创建方法，创建Vue对象
    const app = createApp(App);

    // 使用ElementPlus
    app.use(ElementPlus);

    app.component("sub-component", {
        template: `#temp1`,
        props: {
            name: {
                type: String,
            },
            age: {
                type: Number
            }
        },
        setup(props, context) {

            function submitForm() {
                context.emit("update:modelValue", 3);
            }

            return {
                submitForm
            }
        }
    })



    // 挂载节点
    app.mount("#app");

</script>

</html>